<template>
  <div class="login">
   
    <div class="loginBox">
      <h3>管理员登录</h3>
      <!-- <span class="deadline"></span> -->
      <div class="form">
        <div class="input">
          <img src="../../assets/login/username.png" alt="" />
          <input type="text" placeholder="请输入用户名" v-model="username" />
        </div>
        <div class="input">
          <img src="../../assets/login/password.png" alt="" />
          <input type="password" placeholder="请输入密码" v-model="password" />
        </div>
      
        <!-- 登录按钮 -->
        <div class="btn" @click="login">登录</div>
      </div>
    </div>
    <!-- <div class="loginbg2"></div> -->
  </div>
</template>

<script setup>
//导入
import axios from "axios";
import Header from "./Header.vue";
import { useRouter, useRoute } from "vue-router";
import {  ref } from "vue";
const $router = useRouter();
// 使用 ref 来创建响应式变量
const username = ref('');
const password = ref('');

const setFlag = () => {
  // axios.get()
  localStorage.setItem("isLogin", 1);
   $router.replace("/");
};
const login = async () => {
  try {
    
    const response = await axios.post('http://localhost:8080/login', {
      username: username.value,
      password: password.value
    });
    if (response.data.code==200) {
      console.log("登录成功？",response)
      localStorage.setItem("isLogin", 1);
      $router.replace("/");
    } else {
      console.log(response)
      alert('登录失败');
    }
  } catch (error) {
    console.error('登录请求失败:', error);
    alert('请求失败，请稍后再试');
  }
};
</script>

<style>
.login {
  background-image: url(../../assets/login/bg.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
}
/* .loginbg1 {
  position: absolute;
  left: 50rem;
  top: 45rem;
  width: 30rem;
  height: 50rem;
  background-image: url(../../assets/login/decoration1.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
} */

/* .loginbg2 {
  position: absolute;
  right: 35rem;
  top: 45rem;
  width: 40rem;
  height: 40rem;
  background-image: url(../../assets/login/decoration2.png);
  background-repeat: no-repeat;
  z-index: 1;
} */

.loginBox {
  width: 52rem;
  height: 40rem;
  /* background-image: url(../../assets/login/loginbox.png); */
  background-color: rgba(200, 200, 200, 0.5);
  border-radius: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20rem;
  margin-left: -26rem;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.loginBox h3 {
  font-size: 3rem;
  font-weight: 600;
  color: rgb(50, 50, 50);
  margin-top: 5rem;
  text-align: center;
  margin-bottom: 2rem;
}
.deadline {
  display: block;
  width: 10rem;
  height: 0.5rem;
  background: #01cfff;
  border-radius: 0.5rem;
  margin-top: 1rem;
}
.form {
  width: 44.5rem;
  height: 44.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.input {
  width: 38rem;
  height: 5rem;
  line-height: 5rem;
  /* background-image: url(../../assets/login/input.png); */
  background-color: white;
  border-radius: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.input img {
  margin-left: 1.5rem;
  width: 27px;
  height: 27px;
}
.form input {
  border: none;
  outline: none;
  background-color: transparent;
  border: none;
  /* color: aliceblue; */
}
::-webkit-input-placeholder {
  color: rgb(150, 150, 150);
  font-size: 2.1rem;
}
.input input {
  width: 18rem;
  height: 2.2rem;
  margin-left: 2rem;
  font-size: 2.1rem;
}
.input .code {
  width: 23rem;
  height: 4.3rem;
  line-height: 1.1rem;
}
.btn {
  width: 16rem;
  height: 5.6rem;
  line-height: 5.6rem;
  text-align: center;
  font-size: 2.5rem;
  color: rgb(0, 0, 0);
  /* background-image: url(/src/assets/login/login.png); */
  cursor: pointer;
  margin-bottom: 5rem;
  background-color: white;
  border-radius: 24px;
}
</style>
